Introduction to XHTML
Week 3 Assignment - XHTML & CSS
I have been using css ever since I first learned to build websites in 2003-4, & love learning more about how to use it. There are 3 ways of adding styles to a web site:
- External stylesheets form a separate page with a .css extension at the end of the name. You link this kind of style sheet to each page in the web site using a line of code in the head section. The styles that you would put in an external style sheet are the main styles that will apply to all pages in the web site. The big advantage of this approach is that you can change the style of an element in one place (the style sheet) & it will change the style of that element across all the pages in the site.
- Embedded styles sit between <style></style> tags within the head section & apply to that page alone. You would use these styles when a particular pages requires a style that applies to it alone: e.g. I have used this for a page where I display a series of thumbnail images, leading to larger pop-ups.
- Inline styles can be added as attributes to individual style elements on a page. These always take precedence over embedded styles, which in turn take precedence over external styles.
Positioning images using css is a breeze; you can add a style attribute to individual images, or use one of the other methods. You can add a border & padding to your images to give consistency across a site. You can position your image by floating it to left or right, or if you have several images, by alternating left / right, down the page.
Top Tip: You can use margins, including negative margins, to fine tune the positioning of your image: so if, for instance, your image is too far down the page, you can add a style of ‘margin-top: -1em;’ to move it ‘1em’ up the page. I hope this isn't a mortal sin in XHTML / CSS as it is such a helpful thing to be able to do!
